<template>
  <div>
    <el-input
      :placeholder="placeholder"
      :value="setDefaultCheckedLabels"
      :title="$t('common.selected') + setDefaultCheckedLabels"
      class="input-with-select"
      disabled
    >
      <el-button slot="append" @click="dialog">
        <svg-icon icon-class="tree" />
      </el-button>
    </el-input>
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTips"
      custom-class="icon-dialog"
      append-to-body
    >
      <div class="inputree-container">
        <el-tree
          ref="categoryTree"
          v-loading="false"
          class="categoryTree"
          :class="type == 'radio' ? 'hiddenChk' : ''"
          :data="treeData"
          :props="defaultProps"
          show-checkbox
          :empty-text="$t('common.empty')"
          :element-loading-text="$t('common.loading')"
          :expand-on-click-node="false"
          :default-expand-all="expandAll"
          :node-key="nodeKey"
          :default-checked-keys="type == 'checkbox' ? defaultCheckedKeys: []"
          :style="{ height: height, width: width }"
          @check-change="handleCheckChange"
        >
          <span slot-scope="{ node, data }">
            <el-radio
              v-if="type == 'radio'"
              v-model="radio"
              :label="data[`${nodeKey}`]"
              :disabled="node.disabled==true"
              @change="handleRadioChange(data)"
            >
              {{ node.label }}
            </el-radio>
            {{ type == 'checkbox' ? node.label : '' }}
          </span>
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
        <el-button @click="handleClear">{{ $t('common.clear') }}</el-button>
        <el-button type="primary" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import i18n from '@/lang'
export default {
  name: 'JspCategorytreePicker',
  props: {
    placeholder: {
      type: String,
      default: i18n.t('common.pleaseSelect')
    },
    defaultProps: {
      type: Object,
      default: () => {
        return { children: 'children', label: 'label' }
      }
    },
    treeData: {
      type: Array,
      default: () => {
        return []
      }
    },
    type: {
      type: String,
      default: 'radio' // 选项：radio | checkbox
    },
    // 是否展开所有
    expandAll: {
      type: Boolean,
      default: false
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    // 默认选中值
    defaultCheckedKeys: {
      type: Array,
      default: () => {
        return []
      }
    },
    dialogTips: {
      type: String,
      default: i18n.t('common.pleaseSelect')
    },
    // 默认选中文本
    defaultCheckedLabels: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    height: {
      type: String,
      default: '500px'
    }
  },
  data() {
    return {
      dialogVisible: false,
      radio: '',
      // 所有已选中的节点
      allCheckedNodes: [],
      // 所有已选中的key集
      allCheckedKeys: [],
      // 设置选中默认文本
      setDefaultCheckedLabels: ''
    }
  },
  computed: {
    returnResult() {
      return {
        checkedNodes: this.allCheckedNodes,
        checkedKeys:
          this.type === 'radio' ? this.radio : this.allCheckedKeys.join(','),
        checkedLabels: this.setDefaultCheckedLabels
      }
    }
  },
  watch: {
    defaultCheckedKeys() {
      this.init()
    },
    defaultCheckedLabels(newValue) {
      this.init()
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.setDefaultCheckedLabels = this.defaultCheckedLabels
      if (this.type === 'radio') {
        this.radio = this.defaultCheckedKeys[0] || ''
        if (this.radio !== '') {
          this.allCheckedNodes = [
            { [`${this.nodeKey}`]: this.radio, [`${this.defaultProps.label}`]: this.setDefaultCheckedLabels }
          ]
        }
      }
    },
    dialog() {
      this.dialogVisible = true
    },
    handleCheckChange(data, checked, indeterminate) {},
    handleRadioChange(data) {
      delete data[this.defaultProps.children]
      this.allCheckedNodes = [data]
    },
    handleConfirm() {
      this.setResult()
      this.allCheckedKeys = this.$refs.categoryTree.getCheckedKeys()
      this.$emit('change', this.returnResult)
      this.dialogVisible = false
    },
    setResult() {
      const setDefaultCheckedLabels = []
      if (this.type === 'checkbox') {
        this.allCheckedNodes = this.$refs.categoryTree.getCheckedNodes()
        this.allCheckedNodes.forEach((e) => {
          setDefaultCheckedLabels.push(e[this.defaultProps.label])
        })
      } else {
        setDefaultCheckedLabels.push(
          this.allCheckedNodes[0] ? this.allCheckedNodes[0][this.defaultProps.label] : ''
        )
      }
      this.setDefaultCheckedLabels = setDefaultCheckedLabels.join(',')
    },
    handleClear() {
      this.allCheckedNodes = []
      this.allCheckedKeys = []
      this.radio = ''
      this.setDefaultCheckedLabels = ''
      this.$refs.categoryTree.setCheckedKeys([])
      this.$emit('change', this.returnResult)
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss">
.hiddenChk {
  .el-checkbox {
    display: none;
  }
}
.categoryTree {
  overflow-x: hidden;
  overflow-y: scroll;
}
</style>
